<template>
  <div class="pd30 produceFactory">
    <div class="panelWrap">
      <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
        <div>救援工单管理</div>
      </div>
      <div class="con">
        <div class="con-row flex flexac pl search-box">
          <!-- <div class="flex flexac">
            <el-input v-model="queryParam.id" class="co-input" placeholder="请输入电梯ID..." />
          </div> -->
          <div class="flex flexac">
            <el-input
              v-model="param.name"
              class="co-input"
              placeholder="请输入工单编号..."
            />
          </div>
          <div class="groupbtn flex m-l-40 ">
            <el-button
              class="flex flexac m-r-20 fs14"
              size="small"
              type="warning"
              @click="getOrderList"
            ><i class="co-i" /><span class="search1">查 询</span></el-button>
            <el-button
              class="co-empty flexcenter m-l-25"
              type="info"
              @click="handleEmptySearch"
            ><i class="iconfont icon-qingkong" />清 空</el-button>
          </div>
        </div>
        <div class="con-row flex flexac flexjcsb pl">
          <el-button
            class="defaultbtn"
            type="primary"
            @click="handleRefresh"
          ><i class="el-icon-refresh" :class="refresh ? 'goRefresh' : ''" />刷
            新</el-button>
          <div class="m-r-25 flex">
            <!-- <el-button class="defaultbtn" type="primary" @click="handleAdd"><i class="el-icon-circle-plus-outline" />添加</el-button> -->
            <el-button
              class="defaultbtn"
              type="primary"
              @click="handleExportExcel"
            ><i class="iconfont icon-wenjiandaochu" />导出</el-button>
            <div class="pre m-l-10">
              <el-button
                class="defaultbtn pre"
                type="primary"
                @click="handleSenior('field')"
              ><i class="iconfont icon-shezhi" />字段
              </el-button>
              <div
                class="selectUl"
                :class="seniorSet.field ? 'showSelectUl' : 'hideSelectUl'"
              >
                <div v-for="(item, i) in tablehead" :key="i" class="li">
                  <el-checkbox v-model="item.isShow">{{
                    item.label
                  }}</el-checkbox>
                </div>
              </div>
            </div>
            <div class="pre m-l-10">
              <el-button
                class="defaultbtn"
                type="primary"
                @click="handleSenior('sortable')"
              ><i class="iconfont icon-shezhi" />排序</el-button>
              <div
                class="selectUl"
                :class="seniorSet.sortable ? 'showSelectUl' : 'hideSelectUl'"
              >
                <div
                  v-for="(item, i) in tablehead"
                  v-if="item.isShow"
                  :key="i"
                  class="li"
                >
                  <el-checkbox v-model="item.sortable">{{
                    item.label
                  }}</el-checkbox>
                </div>
              </div>
            </div>
            <!-- <el-button class="defaultbtn" @click="handleExportExcel" type="primary"><i class="iconfont icon-shezhi"></i>固定</el-button> -->
          </div>
        </div>

        <el-table
          id="helpList"
          ref="helpList"
          class="con-table"
          type="expand"
          :data="helpList"
          style="width: 100%"
          highlight-current-row
        >
          <template v-for="item in tablehead">
            <el-table-column
              v-if="item.isShow"
              :key="item.id"
              :width="item.width"
              align="center"
              :sortable="item.sortable"
              :show-overflow-tooltip="true"
              :prop="item.prop"
              :label="item.label"
            />
          </template>
          <el-table-column align="center" prop="name" label="基本操作">
            <template slot-scope="scope">
              <el-button
                class="defaultbtn"
                type="primary"
                plain
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
              >
                <i class="el-icon-edit" />
                详 情</el-button>
              <!-- <el-button type="danger" class="defaultbtn" @click="handleDeleteBtn(scope.$index, scope.row)"><i class="el-icon-delete-solid" />删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="paginationWrap flex "
          :current-page="paging.currentPage"
          :page-sizes="paging.pageSizeArr"
          :page-size="paging.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <WorkDialog
      v-model="helpVisible"
      :data="helpData"
      :is-edit="isEdit"
      @handleCloseDialog="handleCloseDialog"
    />
  </div>
</template>

<script>
import WorkDialog from './dialog/index'
import { helpQuery } from '@/api/maintenance/helporder'
import { acceptQuery } from '@/api/maintenance/acceptwarning'
import { showNotice, formatDateTime } from '@/utils/toolclass'

export default {
  name: 'Contract',
  components: { WorkDialog },
  props: {},
  data() {
    return {
      paging: {
        currentPage: 1,
        pageSize: 10,
        pageSizeArr: [10, 20, 50, 100],
        total: 0
      },

      helpList: [],
      param: {
        id: '',
        name: '',
        type: 1
      },
      helpVisible: false,
      helpData: {},
      isEdit: false,
      refresh: false,
      seniorSet: {
        field: false,
        sortable: false
      },
      tablehead: [
        {
          index: 0,
          prop: 'name',
          label: '工单编号',
          width: '150',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 1,
          prop: 'useUnitAddress',
          label: '救援地址',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 2,
          prop: 'registerCode',
          label: '注册代码',
          // width: '160',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 3,
          prop: 'rescueCode',
          label: '位置码',
          width: '100',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 4,
          prop: 'assignTime',
          label: '派单时间',
          width: '140',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 5,
          prop: 'finishTime',
          label: '完成时间',
          width: '140',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 6,
          prop: 'savePeopleNumber',
          label: '救援人数',
          width: '120',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 7,
          prop: 'status',
          label: '工单状态',
          width: '100',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 8,
          prop: 'result',
          label: '救援结果',
          width: '100',
          sortable: false,
          fixed: true,
          isShow: true
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getOrderList()
    // this.getHelpDetail()
  },
  mounted() {
    this.$storage.set('upUrl', JSON.stringify({ path: '/rescue/rescueOrder' }))
  },
  methods: {
    handleSenior(type) {
      if (type === 'field') {
        this.seniorSet.field = !this.seniorSet.field
      }
      if (type === 'sortable') {
        this.seniorSet.sortable = !this.seniorSet.sortable
      }
    },

    handleExportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/excel/Export2Excel')
        const tHeader = ['电梯ID', '电梯型号', '备注']
        const filterVal = ['id', 'name', 'remark']
        const data = this.formatJson(filterVal, this.helpList)
        export_json_to_excel(
          tHeader,
          data,
          '电梯型号列表(' + formatDateTime().ymd
        ) + ')'
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    handleRefresh() {
      this.refresh = true
      this.getOrderList()
      setTimeout(() => {
        this.refresh = false
      }, 1200)
    },
    getOrderList() {
      helpQuery(this.param.name, this.paging.currentPage, this.paging.pageSize).then(res => {
        // console.log(res)
        if (res.code === '000000') {
          this.helpList = res.data.map(item => {
            this.items = {
              acceptId: item.acceptId, // 受理ID
              acceptTime:
                item.acceptTime === null
                  ? ''
                  : this.$moment(item.acceptTime).format('YYYY-MM-DD'), // 受理时间
              accidentId: item.accidentId, // 事故单id
              arriveImg: item.arriveImg, // 到达图片
              arriveTime:
                item.arriveTime === null
                  ? ''
                  : this.$moment(item.arriveTime).format('YYYY-MM-DD'), // 到达时间
              assignTime:
                item.assignTime === null
                  ? ''
                  : this.$moment(item.assignTime).format('YYYY-MM-DD'), // 指派时间
              ctrData:
                item.ctrData === null
                  ? ''
                  : this.$moment(item.ctrData).format('YYYY-MM-DD'), // 创建时间
              ctrOpr: item.ctrOpr, // 创建人
              elevatorId: item.elevatorId, // 电梯ID
              finishImg: item.finishImg, // 完成图片
              finishTime:
                item.finishTime === null
                  ? ''
                  : this.$moment(item.finishTime).format('YYYY-MM-DD'), // 完成时间
              id: item.id, // ID
              level:
                item.level === 1 ? '一级' : item.level === 2 ? '二级' : '三级', // 1:一级，2：二级，3：三级
              lstEdtData:
                item.lstEdtData === null
                  ? ''
                  : this.$moment(item.lstEdtData).format('YYYY-MM-DD'), // 最后修改时间
              lstEdtOpr: item.lstEdtOpr, // 最后修改人
              name: item.name, // 工单名称
              orgId: item.orgId, // 机构id
              registerCode: item.registerCode, // 注册码
              rescueCode: item.rescueCode, // 求援码
              result:
                item.result === 1
                  ? '救援成功'
                  : item.result === 2
                    ? '救援失败'
                    : '无法实施', // 救援结果(1:成功，2：失败,3:无法实施）
              saveImg: item.saveImg, // 救援图片
              savePeopleNumber: item.savePeopleNumber, // 救援人数
              season: item.season, // 故障原因
              status:
                item.status === 1
                  ? '派单'
                  : item.status === 2
                    ? '已受理'
                    : item.status === 3
                      ? '已到达'
                      : '已结束', // 工单当前状态 1 派单 2 受理 3 到达 4结束
              unitId: item.unitId, // 救援单位ID
              unitType: item.unitType, // 类型
              useUnitAddress: item.useUnitAddress, // 地址
              version: item.version // 版本号
            }
            return this.items
          })
          this.paging = {
            currentPage: res.pager.pageIndex,
            pageSize: res.pager.pageSize,
            total: res.pager.totalSize
          }
        } else {
          if (res.msg === '失败') {
            showNotice('error', '提示', '数据请求失败')
          } else {
            // showNotice('error', '提示', res.msg)
          }
        }
      })
    },
    handleEmptySearch() {
      this.param.id = ''
      this.param.name = ''
      this.getOrderList()
    },
    handleEdit(index, row) {
      this.helpVisible = true
      this.isEdit = true
      acceptQuery(this.paging.currentPage, this.paging.pageSize).then(res => {
        if (res.code === '000000') {
          // console.log(res)
          res.data.map(item => {
            this.helpData = {
              acceptId: row.acceptId, // 受理ID
              acceptTime: row.acceptTime, // 受理时间
              accidentId: row.accidentId, // 事故单id
              arriveImg: row.arriveImg, // 到达图片
              arriveTime: row.arriveTime, // 到达时间
              assignTime: row.assignTime, // 指派时间
              ctrData: row.ctrData, // 创建时间
              ctrOpr: row.ctrOpr, // 创建人
              elevatorId: row.elevatorId, // 电梯ID --
              finishImg: row.finishImg, // 完成图片
              finishTime: row.finishTime, // 完成时间
              id: row.id, // ID
              level:
                row.level === 1 ? '一级' : row.level === 2 ? '二级' : '三级', // 1:一级，2：二级，3：三级
              lstEdtData: row.lstEdtData, // 最后修改时间
              lstEdtOpr: row.lstEdtOpr, // 最后修改人
              name: row.name, // 工单名称
              orgId: row.orgId, // 机构id
              registerCode: row.registerCode, // 注册码 --
              rescueCode: row.rescueCode, // 求援码 --
              result:
                row.result === 1
                  ? '救援成功'
                  : row.result === 2
                    ? '救援失败'
                    : '无法实施', // 救援结果(1:成功，2：失败,3:无法实施）
              saveImg: row.saveImg, // 救援图片
              savePeopleNumber: row.savePeopleNumber, // 救援人数
              season: row.season, // 故障原因 --
              status:
                row.status === 1
                  ? '已派单'
                  : row.status === 2
                    ? '已受理'
                    : row.status === 3
                      ? '已到达'
                      : '已结束', // 工单当前状态 1 派单 2 受理 3 到达 4结束
              status1: row.status1,
              unitId: row.unitId, // 救援单位ID
              unitType: row.unitType, // 类型
              useUnitAddress: row.useUnitAddress, // 地址 --
              version: row.version, // 版本号
              state: item.status === 1 ? '接警' : '完成', // 1: 接警, 2: 完成
              results: item.result === 1 ? '警情' : '非警情', // 警情结果 1 警情 2 非警情
              warningMan: item.warningMan === undefined ? '' : item.warningMan, // 报警人
              warningfrom:
                item.warningfrom === 1
                  ? '人工'
                  : item.warningfrom === 2
                    ? '屏'
                    : item.warningfrom === 3
                      ? '黑匣子'
                      : item.warningfrom === 4
                        ? '算法'
                        : item.warningfrom === 98
                          ? '测试'
                          : '其他' // 1:人工，2：屏，3：黑匣子，4：算法，98：测试，99：其他
            }
          })
        }
      })
    },
    handleAdd() {
      this.helpVisible = true
      this.isEdit = false
      this.helpData = {
        acceptId: '', // 受理ID
        acceptTime: '', // 受理时间
        accidentId: '', // 事故单id
        arriveImg: '', // 到达图片
        arriveTime: '', // 到达时间
        assignTime: '', // 指派时间
        ctrData: '', // 创建时间
        ctrOpr: '', // 创建人
        elevatorId: '', // 电梯ID --
        finishImg: '', // 完成图片
        finishTime: '', // 完成时间
        id: '', // ID
        level: '', // 1:一级，2：二级，3：三级
        lstEdtData: '', // 最后修改时间
        lstEdtOpr: '', // 最后修改人
        name: '', // 工单名称
        orgId: '', // 机构id
        registerCode: '', // 注册码 --
        rescueCode: '', // 求援码 --
        result: '', // 救援结果(1:成功，2：失败,3:无法实施）
        saveImg: '', // 救援图片
        savePeopleNumber: '', // 救援人数
        season: '', // 故障原因 --
        status: '', // 工单当前状态 1 派单 2 受理 3 到达 4结束
        unitId: '', // 救援单位ID
        unitType: '', // 类型
        useUnitAddress: '', // 地址 --
        version: '' // 版本号
      }
    },
    // handleDeleteBtn(index, row) {
    //   this.$alert('这个操作会删除和它相关联的所有数据,确定要删除吗?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     showCancelButton: true,
    //     callback: action => {
    //       if (action === 'confirm') {
    //         this.handleDelete(row.id)
    //       }
    //     }
    //   })
    // },
    // handleDelete(id) {
    //   miOrderDelete(id).then((res) => {
    //     if (res.code === '000000') {
    //       showNotice('success', '提示', '删除成功')
    //       this.getOrderList()
    //     }
    //   })
    // },
    handleCloseDialog() {
      this.helpVisible = !this.helpVisible
    },
    handleSizeChange(val) {
      this.paging.pageSize = val
      // this.getOrderList()
    },
    handleCurrentChange(val) {
      this.paging.currentPage = val
      // this.getOrderList()
    }
  }
}
</script>

<style scoped lang="scss"></style>
